<template>
  <Teleport to="body">
    <div v-if="visible">
      <div class="modal">
        <button @click="close" class="close-btn">X</button>
        <iframe :src="url" class="iframe"></iframe>
      </div>
      <div class="overlay"></div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
defineProps<{
  url: string;
  visible: boolean;
}>();

const emit = defineEmits(['close']);

const close = () => {
  emit('close');
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  height: 80%;
  background: #153651;
  z-index: 1000;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.close-btn {
  background: #f0f0f0;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.iframe {
  width: 100%;
  height: 95%;
  border: none;
}
</style>